<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		
		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<!-- 本页面css -->
		<link rel="stylesheet" href="css/index.css" />


	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">我的消息</span>
					<span class="nav-item">{{handleMeassgeText()}}</span>
				</div>
				<div class="form-wrapper"  style="position: relative;">
					<span class="from-title">
						{{handleMeassgeText()}}
					</span>
					<div class="form-wrapper-content">
						<el-row class="el-row" style="width: 100%;position: relative;">
							<el-col style="position: relative;padding-right: 20px;" :span="12">
								<div  class="button-wrapper message fboxRow">
									<div class="button-wrapper-left fboxRow">
										<div @click="handleClickDeleteMessage" :class="{'noClick': !multipleSelection.length  || multipleSelection.length === 0}" class="yzButton lightToDeep">删除</div>
										<div v-if="meassageType !== 'alreadyRead'" @click="handleClickSelectAlreadyRead" :class="{'noClick': handlealreadReadCss()}" class="yzButton lightToDeep">标记已读</div>
										<div v-if="meassageType !== 'alreadyRead'" @click="handleClickAllAlreadyRead" class="yzButton lightToDeep">全部已读</div>
										<div @click="handleClickDeleteAllMessage" class="yzButton lightToDeep">全部删除</div>
									</div>
								</div>
								
								<el-table @selection-change="handleSelectionChange"  @current-change="handleCurrentChange" highlight-current-row  class="el-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
									<el-table-column
									style="width: 55px;"
									  type="selection"
									  width="55">
									</el-table-column>
								
									<el-table-column label="" width="auto">
										<template slot-scope="scope">
											<span :class="handleTableClass(scope)" class="nowrapShowpointer title">
												{{scope.row.title}}
											</span>
										</template>
								
									</el-table-column>
									
									<el-table-column class="date-table-column" style="width: 200px;" label="" width="200">
										<template slot-scope="scope">
											<span :class="handleTableClass(scope)">
												{{scope.row.date}}
											</span>
										</template>
									</el-table-column>
								</el-table>
								<div class="pagination-wrapper">
								  <div class="total-wrapper">
									  <span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
									  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
											<el-option
											  v-for="item in pageOptions"
											  :key="item.value"
											  :label="item.label"
											  :value="item.value">
											</el-option>
									  </el-select>
								  </div>
								  <el-pagination
									:page-size="pageInfo.pagesize"
									@size-change="handleSizeChange"
									
									@current-change="handleCurrentChange"
									:current-page="pageInfo.currentPage"
									layout="prev, pager, next, jumper"
									:pager-count="4"
									:total="pageInfo.totalSize">
								  </el-pagination>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="message-content-wrapper">
									<p class="content-title nowrapShowpointer">
										{{messageDetailInfo.title}}
									</p>
									<p class="content-time mt-10">
										发布于{{messageDetailInfo.date}}
									</p>
									<div class="content-inner">
										<img   src="../home/img/domainName.png"/>
										<p>测试数据1</p>
										<p>测试数据2</p>
										<p>测试数据3</p>
										<p>测试数据4</p>
										<p>测试数据5</p>
										<p>测试数据6</p>
										<p>测试数据7</p>
										<p>测试数据8</p>
										<p>测试数据9</p>
										<p>测试数据10</p>
										<p>测试数据11</p>
									</div>
								</div>
							</el-col>
							<i class="linear"></i>
						</el-row>
					</div>
					<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="removeSelectMessageVisble">
						<div slot="title" class="dialog-title">
							删除
						</div>
						<div class="dialog-content">
							<div class="dialog-content-infowrapper fboxRow mb-20">
								<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
								<p class="fboxCenter" style="line-height: 25px;">
									确定要删除选中的消息吗？
								</p>
							</div>
					
							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmRemoveSelectMeassge" class="yzButton  confirm">确认</div>
								<div @click="removeSelectMessageVisble = false" class="yzButton cancelButton">取消</div>
							</div>
						</div>
					</el-dialog>
					
					
					<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="removeAllMessageVisble">
						<div slot="title" class="dialog-title">
							全部删除
						</div>
						<div class="dialog-content">
							<div class="dialog-content-infowrapper fboxRow mb-20">
								<img class="mr-20 flagImg" src="../img/warning-orange02.png" />
								<p class="fboxCenter" style="line-height: 25px;">
									确定要删除所有消息吗？
								</p>
							</div>
					
							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmRemoveSelectMeassge" class="yzButton  confirm">确认</div>
								<div @click="removeAllMessageVisble = false" class="yzButton cancelButton">取消</div>
							</div>
						</div>
					</el-dialog>


				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						meassageType: undefined, // 信息类型
						// 表格数据
						tableData: [{
							id:1,
							isRead: false, // 是否已读   false表示未读 true表示已读
							title: '未读消息标题1测试赛测试测试测试测试测试测试测试测试测试测试',
							date: '2020-11-25  11:24:46'
						},{
							id:2,
							isRead: true, // 是否已读   false表示未读 true表示已读
							title: '已读消息标题2',
							date: '2020-11-25  11:25:46'
						},{
							id:3,
							isRead: true, // 是否已读   false表示未读 true表示已读
							title: '已读消息标题3',
							date: '2020-11-25  11:26:46'
						},{
							id:4,
							isRead: false, // 是否已读   false表示未读 true表示已读
							title: '未读消息标题4',
							date: '2020-11-25  11:27:46'
						},{
							id:5,
							isRead: false, // 是否已读   false表示未读 true表示已读
							title: '未读消息标题5',
							date: '2020-11-25  11:28:46'
						}],
						
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 81
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						currentRow: null , // 选择的当前的行
						messageDetailInfo: {  // 消息详细信息

						},
						multipleSelection :[], // 多选选中行  默认为空
						removeSelectMessageVisble:false, // 删除选中消息的dialog
						removeAllMessageVisble: false, // 删除全部消息
					}
				},

				methods: {
					// 处理标题文案
					handleMeassgeText: function () {
						switch (this.meassageType){
							case 'alreadyRead':
								return '已读消息'
								break;
							case 'noread':
								return '未读消息'
								break;
							case 'all':
								return '全部消息'
								break;
							default:
								return '’'
								break;
						}
					},
					
					// 点击标记已读
					handleClickSelectAlreadyRead: function() {
						let noReadGroup  // 未读集合
						noReadGroup = this.multipleSelection.filter(function(item){
							return item.isRead === false
						})
						if(noReadGroup.length && noReadGroup.length > 0) {
							console.log('这些要标记为已读')
							console.log(noReadGroup)
						}else {
							return false
						}
						
					},
					
					// 处理标记已读样式
					handlealreadReadCss: function() {
						let noReadGroup  // 未读集合
						noReadGroup = this.multipleSelection.filter(function(item){
							return item.isRead === false
						})
						if(noReadGroup.length && noReadGroup.length > 0) {
							return false
						}else {
							return true
						}
			
					},
					// 处理表单类型样式
					handleTableClass: function(scope) {
						if(scope.row.id === this.currentRow.id) {
								return 'selected'
						}
						if(scope.row.isRead === true) {
							return 'alreadyRead'
						}else {
							return 'noRead'
						}
					},
					
					handleSizeChange:function(e) {
						console.log(e)
					},
					handleCurrentChange:function(val) {
						console.log('当前页为xxxxx')
					},
					
					// 选择表格 当前行赋值
					handleCurrentChange: function(val) {
						 this.currentRow = val;
						 this.messageDetailInfo =  val
					},
					// 单选 主动选择  某一行为选中行
					 setCurrent: function(row) {
						this.$refs.multipleTable.setCurrentRow(row);
					},
					// 多选  勾选行
					handleSelectionChange: function(val) {
						console.log(val)
						this.multipleSelection =  val
					},
					// 删除消息
					handleClickDeleteMessage: _throttle(function() {
						if(!this.multipleSelection.length  || this.multipleSelection.length === 0) {
							return
						}
						console.log('删除如下消息' )
						console.log(this.multipleSelection)
						this.removeSelectMessageVisble =  true
						
					}),
					
					// 删除全部消息
					handleClickDeleteAllMessage: _throttle(function() {
						// 不全选时才执行  保证一定为全部选中
						if(this.multipleSelection.length !== this.tableData.length) {
							this.$refs.multipleTable.toggleAllSelection();
						}
						console.log(this.multipleSelection)
						this.removeAllMessageVisble =  true
						
					}),
					
					// 确认删除选中消息
					confirmRemoveSelectMeassge: function () {
						console.log('确认删除选中消息 或者 删除全部消息')
						this.removeAllMessageVisble = false
						this.removeSelectMessageVisble = false
					},
					//  标记全部已读
					handleClickAllAlreadyRead: _throttle(function() {
						console.log('标记全部已读')
					})
					

				
				
				
				},
				mounted: function() {
					// 获取 信息类型  全部  已读  未读
					let params = getUrlParams()
					this.meassageType = params.type
					
					// 首先获取表格数据
					// 默认选中第一行为选中行
					if(this.tableData !== undefined   && this.tableData !== []  && this.tableData.length > 0) {
						this.setCurrent(this.tableData[0])
						this.messageDetailInfo = this.tableData[0]
					}
					
				}
			})
		</script>
	</body>
</html>
